
<template>
	<view class="container">
		<view class="one">
			<view class="l">税前月收入</view>
			<view class="r">
			   <input  type="digit"  :value="salary.preTax" data-col="preTax" @input="salaryModify"/>
			</view>
		</view>
		<view class="one">
			<view class="l">专项扣除</view>
			<view class="r">
			   <input  type="digit" :value="salary.specialReduce"  data-col="specialReduce" @input="salaryModify"/>
			</view>
		</view>
		<view class="one">
			<view class="l bold">缴费基数</view>
			<view class="r">
			   <input  type="digit" :value="salary.insurance_base"  data-col="insurance_base" @input="salaryModify"/>
			</view>
		</view>
		<view class="row bold">
			缴费比例
		</view>
		<view class="row">
			<view>
				<text>养老:</text>
				<input  type="digit" :value="salary.insurance_base_age"  data-col="insurance_base_age" @input="salaryModify"/>
				%
			</view>
			<view>
				<text>医疗:</text>
				<input  type="digit" :value="salary.insurance_base_medical"  data-col="insurance_base_medical" @input="salaryModify"/>
				%
			</view>
		</view>
		<view class="row">
			<view>
				<text>失业:</text>
				<input  type="digit" :value="salary.insurance_base_work"  data-col="insurance_base_work" @input="salaryModify"/>
				%
			</view>
			<view>
				<text>公积金:</text>
				<input  type="digit" :value="salary.insurance_base_fund"  data-col="insurance_base_fund" @input="salaryModify"/>
				%
			</view>
		</view>
		<view class="row bold">
			缴费金额
		</view>
		<view class="one">
			<view class="l">养老</view>
			<view class="r">
			   ￥{{salary.insurance_age}}
			</view>
		</view>
		<view class="one">
			<view class="l">医疗</view>
			<view class="r">
			   ￥{{salary.insurance_medical}}
			</view>
		</view>
		<view class="one">
			<view class="l">失业</view>
			<view class="r">
			   ￥{{salary.insurance_work}}
			</view>
		</view>
		<view class="one">
			<view class="l">公积金</view>
			<view class="r">
			   ￥{{salary.insurance_fund}}
			</view>
		</view>
		<view class="one">
			<view class="l">个人所得税(税率:{{salary.taxRatio}}%)</view>
			<view class="r">
			   ￥{{salary.tax}}
			</view>
		</view>
		<view class="one">
			<view class="l">税后收入</view>
			<view class="r">
			   ￥{{salary.afterTax}}
			</view>
		</view>
	</view>
</template>

<style>
	page{
		background-color: #8fcbef;
	}
	.container{
		box-sizing: border-box;
		padding: 10px 5px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		width: 100%;
		flex-direction: column;
	}
	.title{
		text-align: center;
	}
	.one{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}
	.bold{
		font-weight: bold;
	}
	input{
		text-align: center;
		background-color: white;
		width: 100px;
	}
	.row{
		padding: 10px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.row text{
		margin-right: 10px;
	}
	.row  input{
		width:40px;
		margin: 0 5px;
	}
	.row *{
		display: inline-block;
		font-size: 16px;
		color: gray;
	}
	.row view{
		display: flex;
		align-items: center;
	}
    
</style>
<script>
	export default {
		data() {
			return {
				citysIndex:0,
				tax:[5000,8000,17000,30000,40000,60000,85000],
				taxBase:[0,0.03,0.1,0.2,0.25,0.3,0.35,0.45],
				taxReduce:[0,150,710,2410,3910,5910,8910,17410],
				salary:{
					specialReduce:0,
					insurance_base:0,
					insurance_base_age:8,
					insurance_base_medical:2,
					insurance_base_work:0.4,
					insurance_base_fund:12,
					tax:0,
					preTax:0,
					taxRatio:'-',
					afterTax:0,
					insurance_age:0,
					insurance_work:0,
					insurance_medical:0,
					insurance_fund:0,
				}
			}
		},
		methods: {
			cityPickerChange:function(e){
				 console.log('picker发送选择改变，携带值为', e.target.value);
				 
			},
			salaryModify:function(e){
				
				let col = e.currentTarget.dataset.col;
				let val = e.detail.value;
				
				// console.log(col,val,this.salary.preTax);
				if("preTax" == col) {
					if(this.salary.insurance_base==0 || this.salary.insurance_base==this.salary.preTax) {
						this.salary.insurance_base = val;
					}
				}
				this.$set(this.salary,col,val);
				this.calculate();
			},
			calculate:function(){
				
				if(this.salary.preTax == 0){
					return 0;
				}
				  //0.减去专项扣除
				  let s1 = this.salary.preTax - this.salary.specialReduce;
				  console.log("计算税率税前", s1);
		
				 //1.计算社保
				 this.salary.insurance_age =this.salary.insurance_base*this.salary.insurance_base_age/100;
				 this.salary.insurance_work=this.salary.insurance_base*this.salary.insurance_base_work/100;
				 this.salary.insurance_medical=this.salary.insurance_base*this.salary.insurance_base_medical/100;
				 this.salary.insurance_fund=this.salary.insurance_base*this.salary.insurance_base_fund/100;
				 
				 //2.需要交税的钱
				 let s2 = s1 -  this.salary.insurance_age - this.salary.insurance_work -this.salary.insurance_medical-this.salary.insurance_fund;
			
			     //默认为7上限
				 let index = 7;
				 let temps = this.tax;
				 for(let i = 0;i<temps.length;i++){
					 if(s2 <= temps[i]){
					 		index = i;
							break;
					 }
				 }
				 let realtax = this.taxBase[index];
				 
				 //税费
				 this.salary.tax = s2*realtax - this.taxReduce[index];
				 
				 //税率
				 this.salary.taxRatio = realtax*100;
				 //3。税后工资
				 this.salary.afterTax = s2 -  this.salary.tax;
			},
		}
	}
</script>

<style>

</style>
